import { configureStore } from '@reduxjs/toolkit'
import undoable, { excludeAction, StateWithHistory } from 'redux-undo'
import userReducer, { UserStateType } from './userReducer'
import pageReducer, { PageInfoType } from './pageInfoReducer'
import componentsReducer, { ComponentsStateType } from './componentsReducer'

export type StateType = {
    user: UserStateType
    // components: ComponentsStateType // 增加撤销重做 undo 之前的类型
    components: StateWithHistory<ComponentsStateType> // 增加撤销重做 undo 后的类型
    pageInfo: PageInfoType
}

export default configureStore({
    reducer: {
        user: userReducer, // 存储用户信息的数据
        // components: componentsReducer, // [没有undo的写法]存储组件列表的数据

        // 引入undo之后的写法
        components: undoable(componentsReducer, {
            limit: 20, // 限制撤销的步数
            filter: excludeAction([
                'components/resetComponents',
                'components/changeSelectedId',
                'components/selectPrevComponent',
                'components/selectNextComponent',
            ]),
            // 解决刚进入页面时可以点击撤消按钮清空页面组件的问题
            syncFilter: true,
            ignoreInitialState: true,
        }),
        pageInfo: pageReducer, // 页面信息
    },
})
